<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
    <!-- <meta name="x5-orientation" content="portrait"> -->
    <title>签字</title>
    <link rel="stylesheet" href="css/sign.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/dzjm.min.js"></script>
</head>

<body>
    <div class="sign-body" style="display: block;">
        <div class="top" id="signature-container">
            <div class="signature-title">【请在下面空白区域签字】</div>
            <div class="clear_canvas" id="clear">清除</div>
            <div class="undo_canvas" id="undo">撤消</div>
            <div class="redo_canvas" id="redo">重做</div>
            <div class="sure_canvas" id="submit">提交签字</div>
        </div>
        <div style="position: absolute;" class="sign-x" id="sign-x"></div>
        <div style="position: absolute;" class="sign-y" id="sign-y"></div>
    </div>

    <div class="hint" style="display: none;z-index: 9999999999;position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);">
    </div>
    <div class="hint" style="display: none;z-index: 99999999999;position: absolute;background-color: #FFFFFF;top: 40%;left: 50%;margin-left: -100px;width: 200px;height: 100px;line-height: 100px;text-align: center;border-radius: 8px;">
        正在提交...</div>

    <div class="complete-sign" style="width: 100%;position: absolute;top: 20%;text-align: center;display:none;">
        <div><img src="images/complete_sign.png" style="width: 110px;"></div>
        <div style="margin-top:30px;font-size: 24px;color: #20A53A;">已完成签字！</div>
    </div>

    <script src="js/sign.js"></script>
    <script src="js/image.js"></script>
    <script>
        // 提交
        var submit = document.getElementById("submit");
        submit.addEventListener("click", function () {
            var sign_image = '';
            var rotate = false;
            if (window.orientation == 0) {
                console.log("竖屏");
                sign_image = sign_y;
                // 需要对签字图片进行旋转
                rotate = true;
            } else {
                console.log("横屏");
                sign_image = sign_x;
            }
            var sign_json = JSON.parse(sign_image.toJson());
            if (sign_json.data.length === 0) {
                alert("请认真写下您的姓名");
                return;
            }
            var points_count = 0;
            for (var i = 0; i < sign_json.data.length; i++) {
                points_count += sign_json.data[i].points.length
            }
            if (points_count < 50) {
                alert("签名过于简单，请尽量正楷签字！");
                return;
            }
            var signatureData = sign_image.toPng();
            if (rotate) {
                rotateBase64Img(signatureData, -90, function (data) {
                    signatureData = data;
                    submitSign(signatureData);
                });
            } else {
                submitSign(signatureData);
            }
        })

        function submitSign(signatureData) {
            let url = ''
            // if (`${getQueryVariable("type")}`) {
            //     url = `${getQueryVariable('url')}/api/principal/new/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            // } else {
            //     url = `${getQueryVariable('url')}/api/principal/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            // }
            if (`${getQueryVariable("type")}` == 'new') {
                url = `${getQueryVariable('url')}/api/principal/new/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            }
            if (`${getQueryVariable("type")}` == 'old') {
                url = `${getQueryVariable('url')}/api/principal/course/evaluation/process/audit/leader/sign/collect/${getQueryVariable("audit_status")}`
            }
            if (`${getQueryVariable("type")}` == 'user') {
                url = `${getQueryVariable('url')}/api/teacher/sign`
            }
            console.log('RRRRRRRRRRRRRRRRRR', url)
            $(".hint").show();
            $.ajax({
                url: url,
                data: {
                    sign_image: signatureData,
                    token: getQueryVariable("token")
                },
                headers: {
                },
                method: 'PUT',
                success: function (res) {
                    console.log('resresresresresres', res)
                    if (res.code === 0) {
                        if (res.msg == 'success') {
                            $(".sign-body").hide();
                            $(".complete-sign").show();
                            complete_sign = true;
                        } else {
                            alert(res.msg);
                        }
                    } else {
                        alert('签名失败，请重试!');
                    }
                    $(".hint").hide();
                },
                error: function (data) {
                    $(".hint").hide();
                    alert("网络错误");
                }
            });
        }
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = unescape(query).split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
    </script>
</body>

</html>